<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TAO | CRM 管理</title>

    <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
    <link rel="stylesheet" href="/static/css/backend.css">
</head>
<body class="  ">
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <div class="iq-sidebar  sidebar-default  ">
        <div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
            <a href="" class="header-logo">
                <img src="/static/picture/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                <img src="/static/picture/logo-dark.png" class="img-fluid rounded-normal d-none sidebar-light-img"
                     alt="logo">
                <span>TAO</span>
            </a>
            <div class="side-menu-bt-sidebar-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none"
                     viewbox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </div>
        </div>
        <div class="data-scrollbar" data-scroll="1">
            <nav class="iq-sidebar-menu">
                <ul id="iq-sidebar-toggle" class="side-menu">
                    <li class="active sidebar-layout">
                        <a href="/page/main" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            </i>
                            <span class="ml-2">主页</span>
                            <p class="mb-0 w-10 badge badge-pill badge-primary">99+</p>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2 ">
                        <span class="text-uppercase small font-weight-bold">客户管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/customer" class="svg-icon ">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">基本信息</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/lostCustomer" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">流失客户管理</span>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">用户</span>
                    </li>
                    <li class="sidebar-layout">
                        <a href="#app1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
                            <i>
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">用户管理</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active"
                                 width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                        <ul id="app1" class="submenu collapse" data-parent="#iq-sidebar-toggle">
                            <li class=" sidebar-layout">
                                <a href="/page/contactChange" class="svg-icon">
                                    <i class="">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none"
                                             viewbox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                        </svg>
                                    </i><span class="">修改密码</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">营销管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/marking" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">营销机会管理</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/customerPlan" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"></path>
                                </svg>
                            </i>
                            <span class="ml-2">客户开发计划</span>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">服务管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/service" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">服务创建</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/bill" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">订单创建</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="pt-5 pb-5"></div>
        </div>
    </div>
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <nav class="navbar navbar-expand-lg navbar-light p-0">
                <div class="side-menu-bt-sidebar">
                    <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary wrapper-menu" width="30" fill="none"
                         viewbox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </div>
                <div class="d-flex align-items-center">
                    <div class="change-mode">
                        <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                            <div class="custom-switch-inner">
                                <p class="mb-0"></p>
                                <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
                                <label class="custom-control-label" for="dark-mode" data-mode="toggle">
	                                    <span class="switch-icon-right">
	                                        <svg xmlns="http://www.w3.org/2000/svg" id="h-moon" height="20" width="20"
                                                 class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
	                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
	                                        </svg>
	                                    </span>
                                    <span class="switch-icon-left">
	                                        <svg xmlns="http://www.w3.org/2000/svg" id="h-sun" height="20" width="20"
                                                 class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
	                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
	                                        </svg>
	                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div>HI!<a href="/page/contactChange">{{ .UserName }}</a></div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-label="Toggle navigation">
                        <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="30" fill="none"
                             viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 6h16M4 12h16m-7 6h7"></path>
                        </svg>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navbar-list align-items-center">
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="content-page" id="con">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-4">
                    <div class="card card-block p-card">
                        <div class="profile-box" v-model="contact">
                            <div class="profile-card rounded">
                                <img :src="contact.headPhotoURL" alt="profile-bg"
                                     class="avatar-100 rounded d-block mx-auto img-fluid mb-3">
                                <h3 class="font-600 text-white text-center mb-0">^{ contact.contactName }</h3><!--姓名-->
                                <p class="text-white text-center mb-5">TAO</p><!--公司-->
                            </div>
                            <div class="pro-content rounded">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="p-icon mr-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" width="20"
                                             fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76"></path>
                                        </svg>
                                    </div>
                                    <p class="mb-0 eml"><a href="javascript:;"
                                                           class="__cf_email__">^{ contact.email }</a><!--邮箱-->
                                    </p>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="p-icon mr-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" width="20"
                                             fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z"></path>
                                        </svg>
                                    </div>
                                    <p class="mb-0">^{ contact.phoneNumber }</p><!--电话-->
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="p-icon mr-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" width="20"
                                             fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                    </div>
                                    <p class="mb-0">入职于^{ contact.enterTime }</p><!--入职时间-->
                                </div>
                                <div class="d-flex justify-content-center">
                                    <a type="button" href="/unLogin" class="btn btn-danger mt-2">退出登录</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-lg-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between">
                                <div class="header-title">
                                    <h4 class="card-title">修改密码</h4>
                                </div>
                                <div class="header-action">
                                    <i data-toggle="collapse" data-target="#form-element-1" aria-expanded="false">
                                        <svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none"
                                             viewbox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                                        </svg>
                                    </i>
                                </div>
                            </div>
                            <div class="card-body">
                                <form @submit="submit">
                                    <div class="form-group">
                                        <label for="pwd">Password:</label>
                                        <input type="password" v-model="formData.password"
                                               @blur="checkPasswordGram(formData.password)" class="form-control"
                                               id="pwd" autocomplete="new-password">
                                        <div v-if="checkPasswordInfo === 1 && formData.password !== '' "
                                             style="font-size: 15px; color: #ff4b4b">密码不少于8位(包含数字字母)
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="pwd">RePassword:</label>
                                        <input type="password" v-model="formData.rePassword" @blur="checkPassword"
                                               class="form-control" id="pwd" autocomplete="new-password">
                                        <div v-if="checkInfo === 1 && formData.password !== '' && formData.rePassword !== '' "
                                             style="font-size: 15px; color: #00e676">ok
                                        </div>
                                        <div v-if="checkInfo === 0 && formData.password !== '' && formData.rePassword !== ''"
                                             style="font-size: 15px; color: #ff4b4b">两次输入的密码不一样
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputText1">电话号码 </label>
                                        <input type="text" v-model="formData.phone" class="form-control"
                                               id="exampleInputText1" placeholder="Enter Phone">
                                    </div>
                                    <button type="submit" v-if="checkInfo === 1" class="btn btn-primary mr-2">Submit</button>
                                    <button type="button" v-if="checkInfo === 0 || checkInfo === -1" class="btn btn-primary mr-2">Submit</button>
                                    <button type="reset" class="btn bg-danger">Cancel</button>
                                    <div v-if="submitMsg === 1 " style="font-size: 15px; color: #00e676">修改成功</div>
                                    <div v-if="submitMsg === 0" style="font-size: 15px; color: #ff4b4b">
                                        修改失败，请检查手机号码是否正确，或者联系管理员
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper End-->
<footer class="iq-footer">
</footer>    <!-- Backend Bundle JavaScript -->
<script src="/static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="/static/js/customizer.js"></script>

<script src="/static/js/sidebar.js"></script>

<!-- Flextree Javascript-->
<script src="/static/js/flex-tree.min.js"></script>
<script src="/static/js/tree.js"></script>

<!-- Table Treeview JavaScript -->
<script src="/static/js/table-treeview.js"></script>

<!-- SweetAlert JavaScript -->
<script src="/static/js/sweetalert.js"></script>

<!-- Vectoe Map JavaScript -->
<script src="/static/js/vector-map-custom.js"></script>

<!-- Chart Custom JavaScript -->
<script src="/static/js/chart-custom.js"></script>
<script src="/static/js/01.js"></script>
<script src="/static/js/02.js"></script>

<!-- slider JavaScript -->
<script src="/static/js/slider.js"></script>

<!-- Emoji picker -->
<script src="/static/js/index.js" type="module"></script>


<!-- app JavaScript -->
<script src="/static/js/app.js"></script>
<!--vue axion-->
<script src="/static/js/vue.js"></script>
<script src="/static/js/axios-0.18.0.js"></script>
<script>
    new Vue({
        delimiters: ['^{', '}'],
        el: "#con",
        data: {
            formData: {
                password: '',
                rePassword: '',
                phone: ''
            },
            contact: {
                contactId: 0,
                contactName: '',
                phoneNumber: '',
                email: '',
                enterTime: null,
                headPhotoURL:''
            },
            checkInfo: -1,
            checkPasswordInfo: 0,
            checkRePasswordInfo: 0,
            submitMsg: -1
        },
        methods: {
            getContact() {
                var _this = this;
                axios.get('/contact') // 替换为你的后端API URL
                    .then(response => {
                        console.log(response.data);
                        _this.contact = response.data.date; // 将获取到的数据赋值给customers
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            },
            checkPassword() {
                if (this.formData.password === this.formData.rePassword) {
                    this.checkInfo = 1;
                } else {
                    this.checkInfo = 0;
                }
            },
            checkPasswordGram() {
                var patt = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
                if (patt.test(this.formData.password)) {
                    this.checkPasswordInfo = 0;
                } else {
                    this.checkPasswordInfo = 1;
                }
            },
            submit(event) {
                event.preventDefault();
                var _this = this;
                axios.post('/contact', this.formData) // 替换为你的后端API URL
                    .then(response => {
                        // 在这里处理后端返回的响应
                        console.log('Response from server:', response.data);
                        // 清空表单数据或进行其他操作
                        _this.submitMsg = response.data.date;
                        this.formData.password = '';
                        this.formData.rePassword = '';
                        this.formData.phone = '';
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            }

        },
        mounted() {
            this.getContact()
        }
    });
</script>
</body>
</html>